<template>
	<div class="add_same_city"  v-loading="loadingAll">
		<h2>发布新活动</h2>
		<div class="content">
			<div class="step1">
				<img src="../../../assets/images/manage/sameCity/step1.png" alt="" />
			</div>
			<div class="common">
				<h6>活动主题：</h6>				
				<input :class="{reds:red1}" class="act_subject" type="text" placeholder="请输入内容" v-model.trim="input1"/>
			</div>
			<div class="common">
				<h6>活动海报：</h6>
				<div class="up_img" :class="{reds:red2}">
					<div class="up_img_border" @click.stop="goUpload" v-if="loading">
						<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload.png" alt="" />
						<span>添加海报</span>
						<p>一张漂亮的活动海报可以吸引更多用户报名，同时可以增加传播效果</p>
					</div>
					<div class="up_img_border" style="border:none;" @click.stop="goUpload" v-else>
						<img class="have_up_img" :src="showImgUrl" alt="" />
					</div>
				</div>
				<p>建议尺寸：900*525，图片小于4M</p>
			</div>
			<div class="common">
				<h6>活动时间：</h6>
				<div class="act_date" :class="{reds:red3}">
					<el-date-picker v-model="value1" type="datetimerange" :picker-options="pickerOptions1" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
				</div>
			</div>
			<div class="common">
				<h6>报名方式：</h6>
				<el-select v-model="value2" placeholder="请选择" :class="{reds:red4}">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-input :class="{reds:red5}" style="width:250px;margin-left:18px;" type="number" v-model.trim="input2" placeholder="价格（元）"></el-input>
			</div>
			<div class="common">
				<h6>活动类别：</h6>
				<el-select v-model="value3" placeholder="请选择" :class="{reds:red6}">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="common">
				<h6>活动地址：</h6>
				<el-cascader style="width:250px;" :options="options4" v-model="selectedOptions4" :class="{reds:red7}"></el-cascader>
				<el-input style="width:400px;margin-left:18px;" v-model="input3" placeholder="详细地址" clearable :class="{reds:red8}"></el-input>
			</div>
			<div class="common">
				<h6 style="align-self:flex-start;margin-top:12px;">活动详情：</h6>
				<quill-editor style="width:90%;height:300px;border-bottom:1px solid #bebebe;" v-model="content" :options="editorOption" @change="onEditorChange($event)" :class="{reds:red9}">
				</quill-editor>
			</div>
			<div class="step2">
				<img src="../../../assets/images/manage/sameCity/step2.png" alt="" />
				<p @click="show2=!show2">收起</p>
			</div>
			<transition name="fade">
				<div class="infos2" v-if="show2">
					<div class="common">
						<h6>报名项：</h6>
						<div class="sign_tables">
							<div class="table_title">
								<p>报名项名称</p>
								<p>是否必填</p>
								<p>操作</p>
							</div>
							<div class="item_lists">
								<div class="item_list">
									<img style="visibility:hidden;" src="../../../assets/images/manage/sameCity/new.png" alt="" />
									<input type="text" v-model="input4" style="background:#edeeef;border:none;" disabled="disabled" />
									<el-checkbox v-model="checked1" :disabled="true">必填</el-checkbox>
									<img style="cursor:default;" src="../../../assets/images/manage/sameCity/disable_del.png" alt="" />
								</div>
								<div class="item_list">
									<img style="visibility:hidden;" src="../../../assets/images/manage/sameCity/new.png" alt="" />
									<input type="text" v-model="input5" style="background:#edeeef;border:none;" disabled="disabled" />
									<el-checkbox v-model="checked2" :disabled="true">必填</el-checkbox>
									<img style="cursor:default;" src="../../../assets/images/manage/sameCity/disable_del.png" alt="" />
								</div>
								<div class="item_list" v-for="(item,index) in itemData" :key="index">
									<img src="../../../assets/images/manage/sameCity/new.png" alt="" />
									<input type="text" v-model="item.name" />
									<el-checkbox v-model="item.is_must">必填</el-checkbox>
									<img @click="delItem(item.id)" src="../../../assets/images/manage/sameCity/able_del.png" alt="" />
								</div>
								<transition namd="fade">
									<div class="add_item" v-if="!showMore" @click="showMore=true">+新增报名项</div>
									<div class="have_item" v-if="showMore">
										<div class="close_icon">
											<i @click="showMore=false" style="cursor:pointer;" class="el-icon-close"></i>
										</div>
										<div class="common_item">
											<h6><span style="visibility:hidden;">自</span>常用报名项：</h6>
											<div class="common_lists">
												<div class="common_list" @click="selItem(11,'公司')">
													<span>+</span>
													<p>公司</p>
												</div>
												<div class="common_list" @click="selItem(12,'职位')">
													<span>+</span>
													<p>职位</p>
												</div>
												<div class="common_list" @click="selItem(13,'行业')">
													<span>+</span>
													<p>行业</p>
												</div>
												<div class="common_list" @click="selItem(14,'年龄')">
													<span>+</span>
													<p>年龄</p>
												</div>
												<div class="common_list" @click="selItem(15,'性别')">
													<span>+</span>
													<p>性别</p>
												</div>
												<div class="common_list" @click="selItem(16,'邮箱')">
													<span>+</span>
													<p>邮箱</p>
												</div>
												<div class="common_list" @click="selItem(17,'附件')">
													<span>+</span>
													<p>附件</p>
												</div>
												<div class="common_list" @click="selItem(18,'备注')">
													<span>+</span>
													<p>备注</p>
												</div>
											</div>
										</div>
										<div class="self_item">
											<h6>自定义报名项：</h6>
											<div class="common_lists">
												<div class="common_list" @click="selItem(21,'单行文本')">
													<span>+</span>
													<p>单行文本</p>
												</div>
												<div class="common_list" @click="selItem(22,'多行文本')">
													<span>+</span>
													<p>多行文本</p>
												</div>
												<div class="common_list" @click="selItem(23,'单选题')">
													<span>+</span>
													<p>单选题</p>
												</div>
												<div class="common_list" @click="selItem(24,'多选题')">
													<span>+</span>
													<p>多选题</p>
												</div>
											</div>
										</div>
									</div>
								</transition>
							</div>
						</div>
					</div>
				</div>
			</transition>
			<div class="step3">
				<img src="../../../assets/images/manage/sameCity/step3.png" alt="" />
				<p @click="show3=!show3">收起</p>
			</div>
			<transition name="fade">
				<div class="other_setting" v-if="show3">
					<div class="common">
						<h6>活动标签：</h6>
						<el-select v-model="value5" placeholder="请选择" :class="{reds:red10}">
							<el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="common">
						<h6>联系电话：</h6>
						<div class="is_show_telephone">
							<img src="../../../assets/images/manage/sameCity/showTel.png" alt="" />
							<p>显示联系电话</p>
							<el-switch v-model="value6" active-color="#0099e9" inactive-color="#909399">
							</el-switch>
						</div>
					</div>
					<transition name="fade">
						<div class="show_contact_tel" v-if="value6">
							<div class="sale_tel" :class="{reds:red11}">
								<h5>售后服务电话：</h5>
								<input type="text" v-model="input6" placeholder="手机号/座机号（区号-电话号码-分机号）"/>
							</div>
							<div class="cooperation_tel" :class="{reds:red12}">
								<h5>合作联系电话：</h5>
								<input type="text" v-model="input7" placeholder="手机号/座机号（区号-电话号码-分机号）"/>
							</div>
						</div>
					</transition>					
					<div class="common" style="border-bottom:1px solid #e0e0e0;padding-bottom:60px;">
						<h6>推荐设置：</h6>
						<div class="is_show_telephone">
							<img src="../../../assets/images/manage/sameCity/showPlan.png" alt="" />
							<p>加入阿宝流量增长计划</p>
							<el-switch v-model="value7" active-color="#0099e9" inactive-color="#909399">
							</el-switch>
						</div>
					</div>
				</div>
			</transition>
			<div class="footer">
				<div class="agree_service">
					<img src="../../../assets/images/manage/sameCity/agree.png" alt="" />
					<p>同意</p>
					<span>《阿宝服务协议》</span>
				</div>
				<div class="btns">
					<button @click="goBack">返回</button>
					<button @click="release">发布</button>
				</div>
			</div>
		</div>		
		<!-- 上传dialog -->
		<el-dialog title="" :visible.sync="showDialog" width="730" style="border-radius:6px;" :show-close="false">
			<div class="dialog_upload" v-if="loading">
				<img src="../../../assets/images/manage/sameCity/plus.png" alt="" />
				<div class="dialog_text" @click.stop="autoClick">
					<p>请从电脑上传图片</p>
					<span>图片尺寸为：900*525，图片小于4M</span>
					<input type="file" @change="onFileChange" style="display:none;" id="upfile">
				</div>
			</div>
			<div class="dialog_upload" v-else>
				<div class="dialog_text" @click.stop="autoClick">
					<img class="have_up_img" :src="showImgUrl" alt="" />
				</div>
			</div>
			<div class="select_imgs">
				<h6>从海报模板库选择</h6>
				<div class="img_datas">
					<div class="img_data" v-for="(item,index) in 4" :key="index">
						<p>
							<img src="../../../assets/images/manage/sameCity/blueBar.png" alt="" />
							<span>运动健身</span>
						</p>
						<div class="model_datas">
							<div class="model_data" v-for="(item,index) in 7" :key="index">
								<div class="model_img" @click="selImg(index)">
									<img src="../../../assets/images/abao/abao2.png" alt="" />
									<img v-if="selImgIndex===index" src="../../../assets/images/manage/sameCity/selected.png" style="position:absolute;width:30px;height:30px;right:5px;top:5px;color:#0099e9;" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="buttons">
					<button @click="ensures">确认</button>
					<button @click="cancels">取消</button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'add_same_city',
		props: ['data'],
		data() {
			return {
				loadingAll: true,
				input1: '',
				loading: true,
				showImgUrl: '',
				selImgUrl: '',
				showDialog: false,
				selImgIndex: -1,
				value1: '',
				pickerOptions1: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value2: '',
				options2: [{
					value: '1',
					label: '付费报名'
				}, {
					value: '0',
					label: '免费报名'
				}],
				input2: '',
				value3: '',
				options3: [{
					value: '1',
					label: '线上活动'
				}, {
					value: '0',
					label: '线下活动'
				}],
				options4: [],
				selectedOptions4: [],
				input3: '',
				content: '',
				editorOption: {},
				show2: true,
				showMore: false,
				input4: '姓名',
				checked1: true,
				input5: '手机',
				checked2: true,				
				checked6: false,
				selItemIndex: 0,
				itemData: [],
				show3: true,
				value5: '',
				options5: [{
					value: '选项1',
					label: '标签1'
				}, {
					value: '选项2',
					label: '标签2'
				}],
				value6: true,
				input6: '',
				input7: '',
				value7: true,
				red1: false, //input1 活动主题
				red2: false, //showImgUrl或selImgUrl 活动海报
				red3: false, //value1 活动时间
				red4: false, //value2 报名方式
				red5: false, //input2 价格
				red6: false, //value3 活动类别
				red7: false, //selectedOptions4 活动地址
				red8: false, //input3 详细地址
				red9: false, //content 活动详情
				red10: false, //value5 活动标签
				red11: false, //input6 售后服务电话
				red12: false, //input7 合作联系电话
			}
		},
		watch: {
			value1: {
				handler(val) {
					if(val === null) {
						this.value1 = '';
					}
				},
				deep: true
			},
			input1: {
				handler(val) {
					if(val.length > 0){
						this.red1 = false;
					}
				},
				deep: true
			},
			showImgUrl: {
				handler(val) {
					if(val.length > 0){
						this.red2 = false;
					}
				},
				deep: true
			},
			selImgUrl: {
				handler(val) {
					if(val.length > 0){
						this.red2 = false;						
					}
				},
				deep: true
			},
			value1: {
				handler(val) {
					if (val === null) {
						val = this.value1 = [];						
					}
					if(val.length > 0){
						this.red3 = false;
					}
				},
				deep: true
			},
			value2: {
				handler(val) {
					if(val.length > 0){
						this.red4 = false;
					}
				},
				deep: true
			},
			input2: {
				handler(val) {
					if(val.length > 0){
						this.red5 = false;
					}
				},
				deep: true
			},
			value3: {
				handler(val) {
					if(val.length > 0){
						this.red6 = false;
					}
				},
				deep: true
			},
			selectedOptions4: {
				handler(val) {
					if(val.length > 0){
						this.red7 = false;
					}
				},
				deep: true
			},
			input3: {
				handler(val) {
					if(val.length > 0){
						this.red8 = false;
					}
				},
				deep: true
			},
			content: {
				handler(val) {
					if(val.length > 0){
						this.red9 = false;
					}
				},
				deep: true
			},
			value5: {
				handler(val) {
					if(val.length > 0){
						this.red10 = false;
					}
				},
				deep: true
			},
			input6: {
				handler(val) {
					if(val.length > 0){
						this.red11 = false;
					}
				},
				deep: true
			},
			value7: {
				handler(val) {
					if(val.length > 0){
						this.red12 = false;
					}
				},
				deep: true
			},
		},
		components: {

		},
		computed: {

		},
		created() {

		},
		mounted() {
			this.getCity();
		},
		methods: {
			//省市区
			getCity() {
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosPost('/api/store/clist', {
					userinfo: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.loadingAll = false;																					
						res.data.forEach((item,index)=>{
							let obj = {};
							obj.label = item.name;
							obj.value = ''+item.id_area;
							obj.children = [];													
							item.son_data.forEach((item2,index2)=>{
								let obj2 = {};
								let arr2 = [];
								obj2.label = item2.name;
								obj2.value = ''+item2.id_area;								
								arr2.push(obj2);								
								if(item2.son_son_data&&item2.son_son_data.length > 0){
									obj2.children = [];
									item2.son_son_data.forEach((item3,index3)=>{
										let obj3 = {};
										let arr3 = {};
										obj3.label = item3.name;
										obj3.value = ''+item3.id_area;
										obj2.children.push(obj3);
									})
								}
								obj.children.push(obj2);
							})		
							this.options4.push(obj);							
						})	
						//console.log(this.options4);							
					}
				})
			},
			goUpload() {
				this.showDialog = true;
			},
			autoClick() {
				document.getElementById("upfile").click();
			},
			onFileChange($event) {
				let self = this;
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length > 0) {
					this.loading = true;
				}
				fr.onload = function(evt) {
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN'), obj, true).then(res => {
						if(res.code === 200) {
							self.loading = false;
							self.showImgUrl = res.data.fullpath;
							self.selImgUrl = '';
						}
					})
				}
			},
			selImg(id) {
				this.selImgIndex = id;
				this.showImgUrl = '';
			},
			ensures() {

			},
			cancels() {
				this.showDialog = false;
				this.showImgUrl = '';
				this.selImgUrl = '';
				this.loading = true;
			},
			onEditorChange() {
				console.log(this.content);
			},
			selItem(id, name) {
				this.itemData.forEach((i, index) => {
					if(i.id === id) {
						this.itemData.splice(index, 1);
					}
				})
				this.selItemIndex = id;
				let obj = {};
				obj.id = id;
				obj.name = name;
				obj.is_must = false;
				this.itemData.push(obj);
			},
			delItem(id) {
				this.itemData.forEach((i, index) => {
					if(i.id === id) {
						this.itemData.splice(index, 1);
					}
				})
			},
			goBack(){
				this.$emit('goBack');
			},
			release(){								
				if(this.input1.length === 0){
					this.red1 = true;
					this.goTop();
				}
				if(this.showImgUrl.length===0 && this.selImgUrl.length===0){
					this.red2 = true;
					this.goTop(150);
				}
				if(this.value1.length === 0){
					this.red3 = true;
					this.goTop(400);
				}
				if(this.value2.length === 0){
					this.red4 = true;
					this.goTop(500);
				}
				if(this.input2.length === 0){
					this.red5 = true;
					this.goTop(500);
				}
				if(this.value3.length === 0){
					this.red6 = true;
					this.goTop(600);
				}
				if(this.selectedOptions4.length === 0){
					this.red7 = true;
					this.goTop(700);
				}
				if(this.input3.length === 0){
					this.red8 = true;
					this.goTop(700);
				}
				if(this.content.length === 0){
					this.red9 = true;
					this.goTop(800);
				}
				if(this.value5.length === 0){
					this.red10 = true;
				}
				if(this.input6.length === 0){
					this.red11 = true;
				}
				if(this.input7.length === 0){
					this.red12 = true;
				}
				if (this.red1||this.red2||this.red3||this.red4||this.red5||this.red6||this.red7||this.red8||this.red9||this.red10||this.red11||this.red12) {
					return;
				}
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.vid = this.data.id;		
				obj.title = this.input1;		
				obj.p2 = this.showImgUrl;		
				obj.begin_time = this.format(new Date(this.value1[0]).getTime());		
				obj.end_time = this.format(new Date(this.value1[1]).getTime());				
				obj.p4 = this.value2;		
				obj.p5 = this.input2;		
				obj.p6 = this.value3;		
				obj.address = this.selectedOptions4[0]+';'+this.selectedOptions4[1]+';'+this.selectedOptions4[2]+';'+this.input3;								
				obj.content = this.content;		
				obj.p10 = this.value5;
				if (this.value6) {
					obj.p11 = this.input6;		
					obj.p12 = this.input7;
				}								
				console.log(obj);
			},
			format(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.add_same_city {
		text-align: left;
		.reds{
			border: 1px solid #eb6877!important;
		}
		>h2 {
			font-size: 34px;
			color: #333;
			font-weight: 400;
			padding: 38px 0 28px 70px;
			border-bottom: 1px solid #e0e0e0;
		}
		.content {
			padding-bottom: 56px;
			border: 1px solid #e0e0e0;
			border-bottom: none;
			border-right: none;
			.step1 {
				margin: 9px 0 0 1px;
			}
			.common {
				display: flex;
				align-items: center;
				padding: 0 0 0 70px;
				margin-top: 30px;
				overflow: hidden;
				>h6 {
					font-size: 14px;
					color: #233040;
					font-weight: 400;
					white-space: nowrap;
				}
				.act_subject{
					width:80%;
					border:1px solid #d2d6df;
					height:46px;
					padding: 0 15px;
					&::placeholder{
						color: #c2cdd9;
					}
				}
				.up_img {
					width: 350px;
					height: 204px;
					border: 1px solid #d2d6df;
					display: flex;
					align-items: center;
					justify-content: center;
					.up_img_border {
						width: 92%;
						height: 88%;
						border: 2px dashed #d2d6df;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;
						cursor: pointer;
						.no_up_img {
							width: 54px;
							height: 53px;
						}
						.have_up_img {
							width: 100%;
							height: 100%;
						}
						span {
							font-size: 14px;
							color: #0099e9;
							margin: 14px 0 8px 0;
						}
						p {
							font-size: 14px;
							color: #233040;
						}
					}
				}
				>p {
					font-size: 14px;
					color: #65717f;
					align-self: flex-end;
					margin: 0 0 20px 18px;
				}
			}
			.step2,
			.step3 {
				display: flex;
				justify-content: space-between;
				padding: 0 12px 0 1px;
				margin: 20px 0 0 0;
				p {
					align-self: flex-end;
					width: 48px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					font-size: 14px;
					color: #233040;
					border: 1px solid #d2d6df;
					cursor: pointer;
				}
			}
			.infos2 {
				.common {
					>h6 {
						align-self: flex-start;
						margin-top: 12px;
					}
					.sign_tables {
						width: 92%;
						border: 1px solid #d9d9d9;
						padding: 0 0 30px 0;
						.table_title {
							height: 48px;
							display: flex;
							align-items: center;
							background: #edeeef;
							;
							p {
								height: 20px;
								line-height: 20px;
								text-align: center;
								font-size: 14px;
								color: #65717f;
								border-right: 1px solid #d4d7e0;
							}
							p:nth-of-type(1) {
								width: 68%;
								padding-left: 100px;
							}
							p:nth-of-type(2) {
								width: 18%;
							}
							p:nth-of-type(3) {
								width: 14%;
								border-right: none;
								text-align: right;
								padding-right: 12px;
							}
						}
						.item_lists {
							.item_list {
								width: 95%;
								margin: 0 auto;
								padding: 20px 0;
								border-bottom: 1px solid #d9d9d9;
								display: flex;
								align-items: center;
								justify-content: space-between;
								>img:nth-of-type(1) {
									width: 23px;
									height: 16px;
								}
								>img:nth-of-type(2) {
									width: 24px;
									height: 24px;
									cursor: pointer;
								}
								>input {
									border: none;
									width: 350px;
									height: 30px;
									line-height: 30px;
									border: 1px solid #d2d6df;
									font-size: 14px;
									color: #233040;
									padding: 0 8px;
								}
							}
							.add_item {
								width: 140px;
								height: 42px;
								line-height: 42px;
								text-align: center;
								border: 1px solid #0099e9;
								border-radius: 5px;
								background: #fff;
								font-size: 13px;
								color: #0099e9;
								margin: 30px auto;
								cursor: pointer;
								&:hover {
									border: 1px solid #0082c5;
									color: #0082c5;
								}
							}
							.have_item {
								width: 98%;
								margin: 20px auto;
								background: #f9fafc;
								padding: 18px;
								.close_icon {
									display: flex;
									justify-content: flex-end;
								}
								.common_item,
								.self_item {
									display: flex;
									margin: 10px 0;
									h6 {
										text-align: center;
										font-size: 14px;
										color: #2b3847;
										white-space: nowrap;
									}
									.common_lists {
										display: flex;
										flex-wrap: wrap;
										.common_list {
											width: 90px;
											height: 30px;
											text-align: center;
											background: #fff;
											border: 1px solid #ecf0f5;
											display: flex;
											align-items: center;
											justify-content: center;
											margin: 0 0 10px 10px;
											cursor: pointer;
											&:hover {
												border: 1px solid #1aa3eb;
											}
											span {
												font-size: 14px;
												color: #1aa3eb;
											}
											p {
												font-size: 14px;
												color: #333;
												margin-left: 4px;
											}
										}
									}
								}
								.self_item {
									.common_lists {
										.common_list {
											width: 188px;
										}
									}
								}
							}
						}
					}
				}
			}			
			.other_setting{
				.common{
					.is_show_telephone{
						display: flex;
						align-items: center;
						img{
							width: 17px;
							height: 17px;
							margin-top: 1px;
						}
						p{
							font-size: 14px;
							color: #233040;
							margin: 0 7px 0 2px;
						}
					}
				}
				.show_contact_tel{
					.sale_tel,.cooperation_tel{
						width: 70%;
						height: 48px;
						border: 1px solid #d2d6df;
						display: flex;
						align-items: center;						
						margin: 20px 0 0 14%;
						padding: 0 10px;
						h5{
							width: 17%;
							font-size: 14px;
							color: #233040;
							font-weight: 400;
							white-space: nowrap;
						}
						input{
							width: 83%;
							height: 46px;							
							font-size: 14px;
							color: #233040;							
						}
					}
				}
			}
			.footer{
				width: 50%;
				height: 138px;
				background: #f8f8f8;
				margin: 60px auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				.agree_service{
					display: flex;
					align-items: center;
					margin: 12px 0 24px 0;
					img{
						width: 19px;
						height: 19px;
					}
					p{
						font-size: 14px;
						color: #233040;
						margin: 0 2px 0 4px;
					}
					span{
						font-size: 14px;
						color: #0099e9;
						cursor: pointer;
						&:hover{
							text-decoration: underline;
						}
					}
				}
				.btns{
					button{
						height: 50px;
						line-height: 50px;
						text-align: center;
						border-radius: 6px;
						font-size: 16px;
					}
					button:nth-of-type(1){
						width: 140px;						
						background: #fff;						
						color: #13a0ea;		
						margin-right: 45px;			
						box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.1);	
					}
					button:nth-of-type(2){
						width: 212px;						
						background: #13a0ea;						
						color: #fff;						
					}
				}
			}
		}
		.dialog_upload {
			width: 92%;
			height: 88px;
			margin: 0 auto;
			background: #f8f8f8;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			>img {
				width: 40px;
				height: 41px;
				margin-right: 10px;
			}
			.dialog_text {
				p {
					font-size: 18px;
					color: #233040;
				}
				span {
					font-size: 14px;
					color: #aaa;
				}
				.have_up_img {
					width: 88px;
					height: 88px;
				}
			}
		}
		.select_imgs {
			text-align: left;
			h6 {
				font-size: 18px;
				color: #233040;
				font-weight: 400;
				margin: 20px 0 10px 0;
			}
			.img_datas {
				height: 350px;
				overflow: auto;
				.img_data {
					>p {
						display: flex;
						align-items: center;
						img {
							width: 6px;
							height: 22px;
							margin-right: 6px;
						}
						span {
							font-size: 20px;
							color: #adadad;
						}
					}
					.model_datas {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-bottom: 20px;
						.model_data {
							.model_img {
								position: relative;
								width: 210px;
								height: 116px;
								margin-top: 10px;
								img {
									width: 210px;
									height: 116px;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
			.buttons {
				display: flex;
				justify-content: flex-end;
				button {
					width: 90px;
					height: 30px;
					line-height: 30px;
					border-radius: 6px;
					font-size: 14px;
					margin: 10px 15px 0 0;
				}
				button:nth-of-type(1) {
					background: #0099e9;
					color: #fff;
				}
				button:nth-of-type(2) {
					background: #fff;
					color: #333;
					border: 1px solid #ddd;
				}
			}
		}
	}
</style>